<template>
    <el-form :model="forms" :rules="rules" ref="formsRef">
        <el-row :gutter="20">
            <el-col :span="12">
                <el-form-item label="数据源名称" prop="name">
                    <el-input v-model="forms.name"/>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="12">
                <el-form-item label="数据源编码" prop="code">
                    <el-input v-model="forms.code"/>
                    <span class="zc-description">数据源资源标识，一旦创建不可更改。</span>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="12">
                <el-form-item label="同步模式" prop="syncMode">
                    <el-radio-group v-model="forms.syncMode">
                        <el-radio :value="mode.value" v-for="mode in dictionary.syncMode">
                            {{ mode.label }}
                        </el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-col>
            <!--                <el-col :span="12">-->
            <!--                    <el-form-item label="数据库来源" prop="source">-->
            <!--                        <el-radio-group v-model="forms.source">-->
            <!--                            <el-radio :value="source.value" v-for="source in DictionaryStore.dictionary.dbSource">-->
            <!--                                {{ source.label }}-->
            <!--                            </el-radio>-->
            <!--                        </el-radio-group>-->
            <!--                    </el-form-item>-->
            <!--                </el-col>-->
        </el-row>
        <el-divider/>

        <el-tabs tab-position="left" v-model="validate.active">
            <el-tab-pane :label="env.label" v-for="env in dictionary.env" :name="env.value">
                <DbCreate :env="env" :ref="(el) => doSetFromMap(el, env)"></DbCreate>
            </el-tab-pane>
        </el-tabs>
    </el-form>
</template>
<script setup type="ts">
import {reactive, ref} from "vue";
import '@/assets/app.css'
import {dictionary} from "@/utils/core/store";
import DbCreate from '@/views/pages/design/db/create.vue'
import {createDbms} from "@/api/api.dbms";
import {app, company} from "@/utils/core/store";

const emit = defineEmits(["submit"]);

const formsRef = ref();
const fromRefMap = ref({});
const validate = reactive({
    active: 'dev',
    success: true
});

const forms = reactive({
    name: '',
    code: '',
    companyId: company.value.id,
    appId: app.value.id,
    syncMode: '0',
    source: '',
    dbs: []
});

const rules = reactive({
    name: [
        {required: true, message: '请输入数据源名称', trigger: 'blur'},
        {max: 20, message: '数据源名称不能超过20个字符', trigger: 'blur'}
    ],
    code: [
        {required: true, message: '请输入数据源编码', trigger: 'blur'},
        {max: 20, message: '数据源编码不能超过20个字符', trigger: 'blur'}
    ],
    syncMode: [
        {required: true, message: '请输入数据源编码', trigger: 'blur'},
        {max: 20, message: '数据源编码不能超过20个字符', trigger: 'blur'}
    ]
})

const doSetFromMap = (el, env) => {
    if (el) {
        fromRefMap.value[`From_Ref_${env.value}`] = el;
    }
}

const doSubmit = async () => {
    await doValidate();
    console.log(forms.dbs);
    await formsRef.value.validate((valid) => {
        // 检查数据库配置
        if (valid && validate.success) {
            // 保存数据
            createDbms(forms).then(res => {
                emit('submit', res.data);
            })
        }
    })
}

const doValidate = async () => {
    forms.dbs = [];
    validate.success = true;
    dictionary.value.env.forEach(env => {
        const d = fromRefMap.value[`From_Ref_${env.value}`].forms;
        // 处理环境的问题
        d.env = env.value;
        // 可写
        d.writable = 1;
        forms.dbs.push(d);
        fromRefMap.value[`From_Ref_${env.value}`].doSubmit()
            .then(valid => {
                if (valid === true) {
                    return;
                }
                // 如果没有验证通过，选中没通过的tab
                validate.active = env.value;
                validate.success = false;
                return;
            });
    })
}
const exposed = {
    doSubmit
};
defineExpose(exposed);
</script>
